<template>
  <div class="searchList">
    <!--    導航欄-->
    <div class="navbar">
      <van-nav-bar left-arrow title="商品列表" @click-left="$router.back()" />
    </div>
    <!--    搜索框&佈局按鈕-->
    <div class="search-div">
      <!--      假搜索框-->
      <div class="fake-search" @click="$router.push('/search')">
        <van-icon name="search" size="22px" />
        {{ searchName }}
      </div>
      <!--      圖標-->
      <div class="icon">
        <van-icon
          v-if="iconChange"
          name="list-switch"
          size="25px"
          @click="iconChange = false"
        />
        <van-icon v-else name="apps-o" size="25px" @click="iconChange = true" />
      </div>
    </div>
    <!--    綜合&銷量&價格-->
    <div class="zxj">
      <van-tabs v-model="sortType">
        <van-tab name="all" title="綜合"></van-tab>
        <van-tab name="sales" title="銷量"></van-tab>
        <van-tab name="price" title="價格"></van-tab>
      </van-tabs>
    </div>
    <!--    商品列表-->
    <div class="list-div">
      <div v-show="iconChange" class="col-div">
        <searchItem
          v-for="(item, index) in searchList"
          :key="index"
          :item="item"
        ></searchItem>
      </div>
      <div v-show="!iconChange" class="row-div">
        <goodsItem
          v-for="(item, index) in searchList"
          v-show="!iconChange"
          :key="index"
          :item="item"
        ></goodsItem>
      </div>
    </div>
  </div>
</template>
<script>
import searchItem from "@/components/searchItem.vue";
import goodsItem from "@/components/goodsItem.vue";
import { getSearchData } from "@/api/searchList";

export default {
  name: "searchListCom",
  components: {
    searchItem,
    goodsItem,
  },
  data() {
    return {
      searchName: this.$route.query.search,
      iconChange: true,
      page: 1,
      searchList: [],
      sortType: "all",
    };
  },
  computed: {
    //獲取上個頁面搜索的關鍵字
    getName() {
      return this.$route.query.search;
    },
  },
  methods: {
    async getSearchList() {
      const {
        data: {
          data: {
            list: { data },
          },
        },
      } = await getSearchData({
        goodsName: this.getName,
        page: this.page,
        sortType: this.sortType,
      });
      console.log(data);
      this.searchList = data;
    },
  },
  created() {
    this.getSearchList();
  },
};
</script>
<style lang="less">
.searchList {
  .navbar {
  }

  .search-div {
    padding: 0 10px;
    display: flex;
    justify-content: space-around;

    .fake-search {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 18px;
      height: 30px;
      background-color: #f7f7f7;
      width: 98%;
    }

    .icon {
      display: flex;
      align-items: center;
    }
  }

  .zxj {
    height: 50px;
    align-items: center;
  }

  .list-div {
    background: #fafafa;
    height: 100vh;

    .col-div {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
